<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>bfe-ingress-controller e2e test</title>

  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;700&display=swap" />
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap-material-design@4.1.3/dist/css/bootstrap-material-design.min.css" />
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.css" />

  <style type="text/css">
    <%- styles %>
  </style>
</head>

<body>
 <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark text-white">
    <div class="mx-auto">
      <strong><%- ingress.controller %></strong> 
      <strong>version:</strong> <em class="pl-1 pr-3"><%- ingress.version %></em>
      <strong>time:</strong> <em class="pl-1 pr-3"><%- buildTime %></em>
    </div>
  </nav>
  <main role="main" class="container">
    <div class="row mb-3 p-3">
      <div class="col-lg-6">
        <%- include('components/features-overview.chart.ejs') %>
      </div>
      <div class="col-lg-6">
        <%- include('components/scenarios-overview.chart.ejs', {overviewPage: true, scenarios: suite.totalScenariosCount}) %>
      </div>
    </div>
    <div class="row mb-3 p-3">
      <div class="col">
        <%- include('components/features-overview.ejs') %>
      </div>
    </div><%if (pageFooter) { %>
    <div class="row">
      <div class="col-12 text-center">
        <%- pageFooter %>
      </div>
    </div><%} %>
  </main>

  <script src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/bootstrap-material-design@4.1.3/dist/js/bootstrap-material-design.min.js"></script>

  <script>
    $(document).ready(function () {
      $("body").bootstrapMaterialDesign();

      var featureOptions = {
        legend: false,
        responsive: true,
        maintainAspectRatio: false,
      };

      new Chart(document.getElementById("feature-chart"), {
        type: "doughnut",
        tooltipFillColor: "rgba(51, 51, 51, 0.55)",
        data: {
          labels: [
            "Passed",
            "Failed",
            "Ambiguous",
            "Not Defined",
            "Pending",
            "Skipped",
          ],
          datasets: [
            {
              data: [
                <%- suite.totalFeaturesCount.passed.count %>,
                <%- suite.totalFeaturesCount.failed.count %>,
                <%- suite.totalFeaturesCount.ambiguous.count %>,
                <%- suite.totalFeaturesCount.notDefined.count %>,
                <%- suite.totalFeaturesCount.pending.count %>,
                <%- suite.totalFeaturesCount.skipped.count %>
              ],
              backgroundColor: [
                "#26B99A",
                "#E74C3C",
                "#b73122",
                "#F39C12",
                "#FFD119",
                "#3498DB",
              ],
            },
          ],
        },
        options: featureOptions,
      });
      var scenarioOptions = {
        legend: false,
        responsive: true,
        maintainAspectRatio: false,
      };
      new Chart(document.getElementById("scenario-chart"), {
        type: "doughnut",
        tooltipFillColor: "rgba(51, 51, 51, 0.55)",
        data: {
          labels: [
            "Passed",
            "Failed",
            "Ambiguous",
            "Not Defined",
            "Pending",
            "Skipped",
          ],
          datasets: [
            {
              data: [
                <%- suite.totalScenariosCount.passed.count %>,
                <%- suite.totalScenariosCount.failed.count %>,
                <%- suite.totalScenariosCount.ambiguous.count %>,
                <%- suite.totalScenariosCount.notDefined.count %>,
                <%- suite.totalScenariosCount.pending.count %>,
                <%- suite.totalScenariosCount.skipped.count %>
              ],
              backgroundColor: [
                "#26B99A",
                "#E74C3C",
                "#b73122",
                "#F39C12",
                "#FFD119",
                "#3498DB",
              ],
            },
          ],
        },
        options: scenarioOptions,
      });

      <%- include('generic.js') %>
    });
  </script>
</body>
</html>
